<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-form-item {
            margin-bottom: 10px;
        }

        .layui-card-body {
            height: 825px;
        }
    </style>
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb">
                <a href="">专题管理</a>
                <a><cite>添加专题</cite></a>
            </span>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" action="" style="width: 800px;height: 400px;">
                <!-- 专题所属分类 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">所属分类：</label>
                    <div class="layui-input-block">
                        <select name="nc_id" lay-verify="">
                            <option value="">请选择专题分类</option>
                            <% category.forEach((item)=>{%>
                                <option value="<%= item.nc_id%>">
                                    <%= item.nc_name%>
                                </option>
                                <%}) %>
                        </select>
                    </div>
                </div>
                <!-- 专题名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">专题名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="news_title" required lay-verify="required" placeholder="请输入专题名称"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 专题图片 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">专题图片：</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>
                <!-- 预览图 -->
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <blockquote class="layui-elem-quote layui-quote-nm">预览图：
                            <div>
                                <img src="" class="thumb" width="200">
                                <input type="hidden" name="news_thumb" class="gthumb">
                            </div>
                        </blockquote>
                    </div>
                </div>
                <!-- 专题简介 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">专题简介：</label>
                    <div class="layui-input-block">
                        <input type="text" name="news_desc" required lay-verify="required" placeholder="请输入专题简介"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- 专题内容 -->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">专题内容：</label>
                    <div class="layui-input-block">
                        <textarea id="richText" name="news_content" style="display:none;"></textarea>
                    </div>
                </div>
                <!-- 添加新闻时间 -->
                <input type="hidden" name="news_ctime" id="">
                <!-- 提交 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="newsForm">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

</html>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['element', 'upload', 'layer', 'form', 'jquery', 'layedit'], function () {
        var { element, upload, layer, form, $, layedit } = layui
        // 图片上传 获取图片
        var thumb = document.querySelector('.thumb')
        var gthumb = document.querySelector('.gthumb')
        upload.render({
            elem: '#test1',
            url: '/admin/subject/upload',
            done: (res) => {
                if (res.code == 1) {
                    thumb.src = res.url     // 让图片的src属性是传回来的值，让图片可以显示
                    gthumb.value = res.url  // 让表单的值是src
                } else {
                    layer.msg('图片上传失败')
                }
            }
        })
        // 富文本编辑器
        var layeditIns = layedit.build('richText', {

        })
        // 数据上传
        form.on('submit(newsForm)', (data) => {
            data.field.news_content = layedit.getContent(layeditIns)
            $.ajax({
                type: 'POST',
                url: '/admin/subject/insert',
                data: data.field,
                dataType: 'json',
                success: res => {
                    let { code, msg } = res
                    layer.msg(msg)
                }
            })
            return false
        })
    });
</script>